import { Authenticator, CheckboxField, useAuthenticator, } from '@aws-amplify/ui-react'; import { Example, ExampleCode } from '@/components/Example'; import { Fragment } from '@/components/Fragment'; ## Sign Up Fields The following example customizes the Sign Up screen by: - Re-using the default Sign Up form fields - Appending a custom "Terms & Conditions" checkbox with a `validateCustomSignUp` service **Note**: In the example code below, `preferred_username` is not set as an attribute because it has already been defined through [Zero Configuration](./configuration#sign-up-attributes). You may also notice that the `acknowledgement` field is not being sent. This occurs since `acknowledgement` is not a known attribute to Cognito. To assign it as a custom attribute instead, the name field must have the `custom:` prefix. <Fragment> {({ platform }) => import(`./sign-up-fields.${platform}.mdx`)} </Fragment> <Example> <Authenticator initialState="signUp" loginMechanisms={['email']} signUpAttributes={['preferred_username']} components={{ SignUp: { FormFields() { const { validationErrors } = useAuthenticator(); return ( <> <Authenticator.SignUp.FormFields /> <CheckboxField errorMessage={validationErrors.acknowledgement} hasError={!!validationErrors.acknowledgement} name="acknowledgement" value="yes" label="I agree with the Terms & Conditions" /> </> ); }, }, }} services={{ async validateCustomSignUp(formData) { if (!formData.acknowledgement) { return { acknowledgement: 'You must agree to the Terms & Conditions', }; } }, }} /> </Example> > If you'd like to add an attribute please first consider using the [Sign Up Attributes](configuration#sign-up-attributes) prop. In some instances you may want to add an app-specific attribute. In those cases you can add a new form element to the Sign Up form fields. Be aware the HTML `name` attribute on the new form field must match the name of the Cognito attribute. If the cognito attribute is a [custom attribute](https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html) it must have the `custom:` prefix in the HTML attribute name. <Example> <ExampleCode> ```js const formFields = { signUp: { email: { order:1 }, password: { order: 2 }, confirm_password: { order: 3 }, 'custom:your_custom_attribute': { order: 4 } }, } ``` </ExampleCode> </Example>